<#include "../common/frontlayout.ftl"/>
<@html title_="博客">
<link rel="stylesheet" href="${root}/tools/layui/css/layui.css" media="all" />
<style>
    .blog-span{
        color: #9d9d9d;
        font-size: .75rem
    }
</style>
<div class="blog">

    <div class="container">
        <form class="layui-form" id="listForm" action="${root}/blog/list" method="post">
        </form>
        <div class="navigation" style="float: left">
            <ul class="navig blogIg " style="display:inline-flex;top: 7%; float:left;">
                <li><a href="javascript:void(0);" onclick="data(this,0)" id="system">系统推荐</a></li>
                <li><a href="javascript:void(0);" onclick="data(this,1)">阅读榜</a></li>
                <li><a href="javascript:void(0);" onclick="data(this,2)">收藏榜</a></li>
                <li><a href="javascript:void(0);" onclick="data(this,3)">点赞榜</a></li>
                <li><a href="javascript:void(0);" onclick="data(this,4)">最新博客</a></li>
            </ul>
        </div>

        <div class="blog-top">

            <div class="col-md-9 blog-left"><br><div id="listDataBody"></div></div>

            <div class="col-md-3 blog-right">
                <div class="categories">
                    <h4>类别</h4>
                    <ul>
                        <#list types as type>
                            <li><a href="javascript:void(0);" onclick="data(null,0,'${type.id}')">${type.name}</a></li>
                        </#list>
                    </ul>
                </div>
                <div class="categories">
                    <h4>活跃榜</h4>
                    <ul>
                        <#list blogActiveUsers as active>
                            <li><a href="">${active.nickname!active.username}</a></li>
                        </#list>
                    </ul>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

<script src="${root}/tools/jquery/jquery.form.js"></script>
<script src="${root}/tools/layui/layui.js"></script>
<script>

    $(function () {
        data(null,0,null);
    })
    var pathname = window.location.pathname;
    $(".navigation>ul.blogIg>li").each(function(){
        var thisUrl = $(this).children().attr("href") ;
        if(thisUrl == pathname){
            $(this).children().addClass("active");
        }
    })

    function data(obj,type,blogTypeId) {
        $(".navigation>.blogIg>li>a").css('color', '');
        $("#listDataBody").html("");
        layui.use('flow', function(){

            var flow = layui.flow;
            flow.load({
                elem: '#listDataBody'
                ,done: function(page, next){
                    var $ = layui.jquery;
                    var lis = [];
                    $.get('/blog/list',{"number":page,"type":type,"blogTypeId":blogTypeId}, function(res){
                        if(res.page){
                            layui.each(res.page.records, function(index, item){
                                var name = item.username;
                                if(item.nickname){
                                    name =item.nickname;
                                }
                                var desc = '阅读 '+item.readCount;
                                if(type==2){
                                    desc = '收藏 '+item.collectCount;
                                }
                                if(type==3){
                                    desc = '点赞 '+item.praiseCount;
                                }
                                lis.push('<div class="blog-one">'+
                                        '<div  style="float:left;height:100px;">'+
                                        '<img src="'+item.headimg+'?imageslim" style="border-radius: 50%" width="45" height="45">'+
                                        '</div>'+
                                        '<div style="padding-left: 60px;">'+
                                        '<blockquote>'+
                                        '<a href="/blog/'+item.blogId+'">'+item.title+'</a>'+
                                        '<small>'+item.abstracts+'</small>'+
                                        '</blockquote>'+
                                        '</div>'+
                                        '<div style="margin-left: 62px;margin-top: 10px">'+
                                        '<span class="blog-span">'+name+'&nbsp;</span>'+
                                        '<span class="blog-span">发布于&nbsp;</span>'+
                                        '<span class="blog-span">'+item.insertDate+'&nbsp;</span>'+
                                        '<span class="blog-span">'+desc+'</span>'+
                                        '</div>'+
                                        '</div>'+
                                        '<br>');
                            });

                            next(lis.join(''), page < res.page.pages);
                        }

                    });
                }
            });
        });
        if(obj){
            $(obj).css({"color":"#5FBD78"});
        }else{
            $("#system").css({"color":"#5FBD78"});
        }

    }
</script>
</@html>

